


// import React, { useState,useEffect } from 'react';
// import {
//   UploadOutlined,
//   VideoCameraOutlined,
// } from '@ant-design/icons';
// import Jiaoa from '@/components/Footer/Jiao'
// import { Link } from 'umi';
// import {
//   DesktopOutlined,
//   PieChartOutlined,
//   CopyOutlined,
//   UserOutlined,
//   SearchOutlined,
//   SettingOutlined,
//   ProfileOutlined,
//   FileAddOutlined,
//   MessageOutlined,
//   MailOutlined,
//   FolderOpenOutlined,
//   StarOutlined,
//   MenuFoldOutlined,
//   MenuUnfoldOutlined,
//   TeamOutlined,
//   FileOutlined
// } from '@ant-design/icons';
// import { IRouteComponentProps } from 'umi'
// import type { MenuProps } from 'antd';
// import { Breadcrumb, Layout, Menu, theme } from 'antd';
// import '@/pages/style/style.less'
// const { Header, Content, Footer, Sider } = Layout;
// import { Button, Space } from 'antd';
// import topiceon from '@/image/topicon.png';
// import {PageHeaderWrapper} from '@ant-design/pro-layout'
// import { connect } from 'umi';
// import { NavLink } from 'react-router-dom'
// import '@/style/index.less'
// import Xj from '@/components/index/New'
// type Props = {};

// const index = (props: any) => {
//   const { Header, Sider, Content } = Layout;



// type MenuItem = Required<MenuProps>['items'][number];

// function getItem(
//   label: React.ReactNode,
//   key: React.Key,
//   icon?: React.ReactNode,
//   children?: MenuItem[],
// ): MenuItem {
//   return {
//     key,
//     icon,
//     children,
//     label,
//   } as MenuItem;
// }

// function index({ children, location, route, history, match }: IRouteComponentProps) {

//   const [collapsed, setCollapsed] = useState(false);
//   const [routes, setRoutes]: any = useState(route.routes)
//   const items: MenuItem[] = [

//     getItem(
//       <Link to={'/pages/Workbench'}>工作台</Link>,
//       '1',
//       <PieChartOutlined />,
//     ),
//     getItem('文章管理', '2', <DesktopOutlined />, [
//       getItem(<Link to={'/pages/Articlemanagement/All'}>所有文章</Link>, '3'),
//       getItem(
//         <Link to={'/pages/Articlemanagement/Classify'}>分类管理</Link>,
//         '4',
//       ),
//       getItem(<Link to={'/pages/Articlemanagement/Lable'}>标签管理</Link>, '5'),
//     ]),
//     getItem(
//       <Link to={'/pages/Pagee'}>页面管理</Link>,
//       'sub1',
//       <UserOutlined />,
//     ),
//     getItem(
//       <Link to={'/pages/knowledge'}>知识小册</Link>,
//       'sub2',
//       <TeamOutlined />,
//     ),
//     getItem(<Link to={'/pages/Poster'}>海报管理</Link>, '9', <FileOutlined />),
//     getItem(
//       <Link to={'/pages/Comment'}>评论管理</Link>,
//       '10',
//       <FileOutlined />,
//     ),
//     getItem(<Link to={'/pages/Mail'}>邮件管理</Link>, '11', <FileOutlined />),
//     getItem(<Link to={'/pages/File'}>文件管理</Link>, '12', <FileOutlined />),
//     getItem(<Link to={'/pages/Search'}>搜索记录</Link>, '13', <FileOutlined />),
//     getItem(<Link to={'/pages/Visit'}>访问统计</Link>, '14', <FileOutlined />),
//     getItem(<Link to={'/pages/User'}>用户管理</Link>, '15', <FileOutlined />),
//     getItem(<Link to={'/pages/System'}>系统设置</Link>, '16', <FileOutlined />),
//   ];


//   return (
//     <div className="HomeIndex">
//       <Layout>
//         <Sider
//           trigger={null}
//           collapsible
//           collapsed={collapsed}
//           className="siderbox"
//         >
//           <div className="logo" />
//           <div className="headerbox">
//             <div className="top">
//               <img src={topiceon} alt="" />
//               <h2>管理后台</h2>
//             </div>
//             <div className="xinjian">
//               <Button type="primary" className="xj">
//                 + 新建
//               </Button>
//             </div>
//           </div>
//           <Menu
//             theme="dark"
//             defaultSelectedKeys={['1']}
//             mode="inline"
//             items={items}
//           />
//         </Sider>
//         <Layout className="site-layout">
//           <Header className="site-layout-background" style={{ padding: 0 }}>
//             {React.createElement(
//               collapsed ? MenuUnfoldOutlined : MenuFoldOutlined,
//               {
//                 className: 'trigger',
//                 onClick: () => setCollapsed(!collapsed),
//               },
//             )}
//           </Header>
//           <div className='dhbox'>
//               <Breadcrumb style={{ margin: '16px 0' }}>
//                 <Breadcrumb.Item>User</Breadcrumb.Item>
//                 <Breadcrumb.Item>Bill</Breadcrumb.Item>
//               </Breadcrumb>
//               <PageHeaderWrapper></PageHeaderWrapper>
//             </div>
//           <Content style={{ margin: '0 16px' }}>

//             <div className='childrenbox'>{props.children}</div>
//           </Content>
//           <Footer style={{ textAlign: 'center' }}>
//             <Jiaoa></Jiaoa>
//           </Footer>
//     getItem(<NavLink to={'/pages/Workbench'}>工作台</NavLink>, '1', <PieChartOutlined />),
//     getItem('文章管理', '2', <DesktopOutlined />, [
//       getItem(<NavLink to={'/pages/Articlemanagement/All'}>所有文章</NavLink>, '3'),
//       getItem(<NavLink to={'/pages/Articlemanagement/Classify'}>分类管理</NavLink>, '4'),
//       getItem(<NavLink to={'/pages/Articlemanagement/Lable'}>标签管理</NavLink>, '5'),
//     ]),
//     getItem(<NavLink to={'/pages/Pagee'}>页面管理</NavLink>, 'sub1', <UserOutlined />),
//     getItem(<NavLink to={'/pages/knowledge'}>知识小册</NavLink>, 'sub2', <ProfileOutlined />),
//     getItem(<NavLink to={'/pages/Poster'}>海报管理</NavLink>, '9', <StarOutlined />),
//     getItem(<NavLink to={'/pages/Comment'}>评论管理</NavLink>, '10', <MessageOutlined />),
//     getItem(<NavLink to={'/pages/Mail'}>邮件管理</NavLink>, '11', <MailOutlined />),
//     getItem(<NavLink to={'/pages/File'}>文件管理</NavLink>, '12', <FolderOpenOutlined />),
//     getItem(<NavLink to={'/pages/Search'}>搜索记录</NavLink>, '13', <SearchOutlined />),
//     getItem(<NavLink to={'/pages/Visit'}>访问统计</NavLink>, '14', <DesktopOutlined />),
//     getItem(<NavLink to={'/pages/User'}>用户管理</NavLink>, '15', <UserOutlined />),
//     getItem(<NavLink to={'/pages/System'}>系统设置</NavLink>, '16', <SettingOutlined />),
//   ];
//   const Mian = () => {
//     if (location.pathname != '/index/workbench') {
//       return <Breadcrumb style={{ margin: '16px 0' }}>
//         <Breadcrumb.Item><NavLink to={'/pages/workbench'}>工作台</NavLink></Breadcrumb.Item>
//         <Breadcrumb.Item>{
//           routes.map((item: any, index: number) => {
//             if (item.path == location.pathname) {
//               return item.title
//             }
//           })
//         }</Breadcrumb.Item>
//       </Breadcrumb>
//     }
//     return <Breadcrumb style={{ margin: '16px 0' }}>
//       <Breadcrumb.Item><NavLink to={'/pages/workbench'}>工作台</NavLink></Breadcrumb.Item>
//       <Breadcrumb.Item></Breadcrumb.Item>
//     </Breadcrumb>
//   }
//   const Telescoping = () => {
//     if (collapsed) {
//       return <i className='shou' onClick={() => { setCollapsed(false) }}><MenuUnfoldOutlined /></i>
//     }
//     else {
//       return <i className='shou' onClick={() => { setCollapsed(true) }}><MenuFoldOutlined /></i>
//     }
//   }
//   return (
//     <div>
//       <Layout style={{ minHeight: '100vh' }}>
//         <Sider collapsible collapsed={collapsed} onCollapse={value => setCollapsed(value)}>
//           <div className={collapsed ? 'logo zhishou' : "logo"} >
//             <img src={require('../image/topicon.png')} className="logoimg" alt="" />
//             <p className='logop'>管理后台</p>
//             <Xj txt={collapsed}></Xj>
//           </div>
//           <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline" items={items} />
//         </Sider>
//         <Layout className="site-layout">
//           <Header className="site-layout-background" style={{ padding: 0 }}><Telescoping /></Header>
//           <Content style={{ margin: '0 16px' }}>
//             <Mian></Mian>
//             <div className="site-layout-background" style={{ padding: 24, minHeight: 360 }}>
//               {children}
//             </div>
//           </Content>
//           <Footer style={{ textAlign: 'center' }}>Copyright &copy; 2022 Designed by Fantasticit.</Footer>
//         </Layout>
//       </Layout>
//     </div>
//   );
// };

// export default index;

import {
  DesktopOutlined,
  PieChartOutlined,
  CopyOutlined,
  UserOutlined,
  SearchOutlined,
  SettingOutlined,
  ProfileOutlined,
  FileAddOutlined,
  MessageOutlined,
  MailOutlined,
  FolderOpenOutlined,
  StarOutlined,
  DownOutlined,
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  GithubFilled
} from '@ant-design/icons';
import Jiaoa from '@/components/Footer/Jiao'
import { IRouteComponentProps,history } from 'umi'
import type { MenuProps } from 'antd';
import { Breadcrumb, Layout, Menu ,Space,Dropdown,Avatar} from 'antd';
import React, { useState } from 'react';
import { NavLink } from 'react-router-dom'
import '@/style/index.less'
import Xj from '@/components/index/New'

const { Header, Content, Footer, Sider } = Layout;
type MenuItem = Required<MenuProps>['items'][number];

function getItem(
  label: React.ReactNode,
  key: React.Key,
  icon?: React.ReactNode,
  children?: MenuItem[],
): MenuItem {
  return {
    key,
    icon,
    children,
    label,
  } as MenuItem;
}

function index({ children, location, route, history, match }: IRouteComponentProps) {
  const [collapsed, setCollapsed] = useState(false);
  const data: any = JSON.parse(
    window.localStorage.getItem('user') as string
  )
  console.log(data,'------------------------');

  const [routes, setRoutes]: any = useState(route.routes)
  const menu = (
    <Menu
      items={[
        {
          key: '1',
          label: (
            <p
            onClick={() => {
              history.push('/');
            }}
          >
            个人中心
          </p>
          ),
        },
        {
          key: '2',
          label: (
            <p
              onClick={() => {
                history.push('/pages/User');
              }}
            >
              用户管理
            </p>
          ),

        },
        {
          key: '3',
          label: (
            <p
            onClick={() => {
              history.push('/pages/System');
            }}
          >
            系统设置
          </p>
          ),

        },
        {
          key: '4',
          danger: true,
          label: ( <p
            onClick={() => {
              window.localStorage.clear();
              history.push('/login');
            }}
          >
            退出登录
          </p>)
        },
      ]}
    />
  );

  const items: MenuItem[] = [
    getItem(<NavLink to={'/pages/Workbench'}>工作台</NavLink>, '1', <PieChartOutlined />),
    getItem('文章管理', '2', <DesktopOutlined />, [
      getItem(<NavLink to={'/pages/Articlemanagement/All'}>所有文章</NavLink>, '3'),
      getItem(<NavLink to={'/pages/Articlemanagement/Classify'}>分类管理</NavLink>, '4'),
      getItem(<NavLink to={'/pages/Articlemanagement/Lable'}>标签管理</NavLink>, '5'),
    ]),
    getItem(<NavLink to={'/pages/Pagee'}>页面管理</NavLink>, 'sub1', <UserOutlined />),
    getItem(<NavLink to={'/pages/knowledge'}>知识小册</NavLink>, 'sub2', <ProfileOutlined />),
    getItem(<NavLink to={'/pages/Poster'}>海报管理</NavLink>, '9', <StarOutlined />),
    getItem(<NavLink to={'/pages/Comment'}>评论管理</NavLink>, '10', <MessageOutlined />),
    getItem(<NavLink to={'/pages/Mail'}>邮件管理</NavLink>, '11', <MailOutlined />),
    getItem(<NavLink to={'/pages/File'}>文件管理</NavLink>, '12', <FolderOpenOutlined />),
    getItem(<NavLink to={'/pages/Search'}>搜索记录</NavLink>, '13', <SearchOutlined />),
    getItem(<NavLink to={'/pages/Visit'}>访问统计</NavLink>, '14', <DesktopOutlined />),
    getItem(<NavLink to={'/pages/User'}>用户管理</NavLink>, '15', <UserOutlined />),
    getItem(<NavLink to={'/pages/System'}>系统设置</NavLink>, '16', <SettingOutlined />),
  ];
  const Mian = () => {
    if (location.pathname != '/index/workbench') {
      return <Breadcrumb style={{ margin: '16px 0' }}>
        <Breadcrumb.Item><NavLink to={'/pages/workbench'}>工作台</NavLink></Breadcrumb.Item>
        <Breadcrumb.Item>{
          routes.map((item: any, index: number) => {
            if (item.path == location.pathname) {
              return item.title
            }
          })
        }</Breadcrumb.Item>
      </Breadcrumb>
    }
    return <Breadcrumb style={{ margin: '16px 0' }}>
      <Breadcrumb.Item><NavLink to={'/pages/workbench'}>工作台</NavLink></Breadcrumb.Item>
      <Breadcrumb.Item></Breadcrumb.Item>
    </Breadcrumb>
  }
  const Telescoping = () => {
    if (collapsed) {
      return <i className='shou' onClick={() => { setCollapsed(false) }}><MenuUnfoldOutlined /></i>
    }
    else {
      return <i className='shou' onClick={() => { setCollapsed(true) }}><MenuFoldOutlined /></i>
    }
  }
  return (
    <div>
      <Layout style={{ minHeight: '100vh' }}>
        <Sider collapsible collapsed={collapsed} onCollapse={value => setCollapsed(value)}>
          <div className={collapsed ? 'logo zhishou' : "logo"} >
            <img src={require('../image/topicon.png')} className="logoimg" alt="" />
            <p className='logop'>管理后台</p>
            <Xj txt={collapsed}></Xj>
          </div>
          <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline" items={items} />
        </Sider>
        <Layout className="site-layout">
          <Header className="site-layout-background" style={{ padding: 0 }}><Telescoping />

          <GithubFilled style={{ fontSize: '25px',marginLeft:"80%", marginBottom: '30px' }} />
          <Avatar className="Avatar" size={25} src={data.avatar}  />
          <Dropdown overlay={menu}>
      <Space>
       Hi,{data.name}
        <DownOutlined />
      </Space>

  </Dropdown>
          </Header>
          <Content style={{ margin: '0 16px' }}>
            <Mian></Mian>
            <div className="site-layout-background" style={{ padding: 24, minHeight: 360 }}>
              {children}
            </div>
          </Content>
          <Footer style={{ textAlign: 'center' }}><Jiaoa></Jiaoa></Footer>
        </Layout>
      </Layout>
    </div>
  )
}

export default index
